import React from 'react'
import { Card, Space, Button, Checkbox, Form, Input } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
//登录页面
export default function Login(props) {
  //表单验证时的回调
  const onFinish = values => {
    //1.本地缓存
    localStorage.setItem('token', values.username)
    //2.跳转到首页
    props.history.push('/admin/home')
  };

  return (
    <div>
      <Card title="欢迎登录" style={{ width: 400, margin: '100px auto' }}>
        <Form
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '用户名不正确!' }]}
          >
            <Input placeholder='请输入用户名' prefix={<UserOutlined />} />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '密码不正确!' }]}
          >
            <Input.Password placeholder='请输入密码' prefix={<LockOutlined />} />
          </Form.Item>


          <Form.Item label={null}>
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
